<template>
  <view class="personal-center">
    <view class="top-content" :style="{ opacity: opacityValue }">
      <view class="user-logo">
        <image class="image-style" src="/static/user.jpg"></image>
      </view>
    </view>
    <view class="right-set-box">
      <text class="iconfont icon-weibiaoti--17"></text>
      <text class="iconfont icon-weibiaoti--33"></text>
      <text class="iconfont icon-weibiaoti--5"></text>
    </view>
    <scroll-view
      class="menu-content"
      scroll-y="true"
      @scroll="scrollFn"
      :show-scrollbar="false"
    >
      <view class="mrt-100">
        <userInfo003></userInfo003>
      </view>

      <view class="bottom-box">
        <view class="br-15">
          <tab001></tab001>
        </view>
        <view class="br-15 mr-15">
          <tab008 :leftShow="false" :menuList="menuList3"></tab008>
        </view>
        <view class="br-15 mr-15">
          <hstab001 :propsMenuList="menuList" :iconSize="60"></hstab001>
        </view>

        <view class="br-15 mr-15">
          <tab001 :menuList="menuList2" :isShowRightAll="false"></tab001>
        </view>
        <view class="panel-list-item">
          <!-- 动态每个面板组件 -->
          <panel006
            class="list-item"
            :showData="itemData"
            v-for="itemData in weipinhuiBigData"
            :key="itemData.id"
          >
          </panel006>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { weipinhuiBigData } from "@/common/simulatedData.js";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      weipinhuiBigData,
      opacityValue: 0,
      menuList: [
        {
          list: [
            {
              id: 1,
              title: "会员",
              icon: "t-icon-huiyuan1",
            },
            {
              id: 2,
              title: "红包",
              icon: "t-icon-hongbao1",
            },
            {
              id: 3,
              title: "任务",
              icon: "t-icon-renwu",
            },
            {
              id: 4,
              title: "会员身份",
              icon: "t-icon-huiyuanshenfen",
            },
            {
              id: 5,
              title: "卡券",
              icon: "t-icon-kaquan",
            },
          ],
        },
        {
          list: [
            {
              id: 1,
              title: "现金充值",
              icon: "t-icon-xianjinchongzhi",
            },
            {
              id: 2,
              title: "话费充值",
              icon: "t-icon-huafeichongzhi",
            },
            {
              id: 3,
              title: "优惠券",
              icon: "t-icon-youhuiquan",
            },
            {
              id: 4,
              title: "积分",
              icon: "t-icon-jifen1",
            },
            {
              id: 5,
              title: "加盟",
              icon: "t-icon-jiameng",
            },
          ],
        },
      ],
      menuList2: [
        { des: "0", title: "优惠券", tips: "" },
        { des: "0", title: "唯品币", tips: "" },
        { des: "3万", title: "唯品花", tips: "最高" },
        { des: "最高20万", title: "借钱", tips: "低息" },
        { icon: "icon-tuikuantuihuo", title: "我的资产", tips: "有优惠" },
      ],
      menuList3: [
        {
          id: 21,
          tag: "收藏5",
          imageUrl: "/static/components/tab/women/轻薄外套.jpg",
          price: "¥149",
        },
        {
          id: 22,
          tag: "足迹15",
          imageUrl: "/static/components/tab/women/连体裙.jpg",
          price: "¥299",
        },
        {
          id: 23,
          tag: "订阅2",
          imageUrl: "/static/components/tab/women/帽衫.jpg",
          price: "¥99",
        },
      ],
    });
    const scrollFn = (e) => {
      if (e.detail.scrollTop > 101) {
        data.opacityValue = 1;
        return;
      }
      const a = e.detail.scrollTop / 100;
      data.opacityValue = a > 1 ? 1 : a;
    };
    return {
      scrollFn,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
/deep/ .des {
  font-size: 26rpx;
}
/deep/ .hs-tabs {
  padding-top: 20rpx;
}
/deep/ .tips {
  background-color: #fdf6fb !important;
  color: #ff0777 !important;
  top: -18rpx !important;
  right: 5rpx !important;
}
/deep/ .image-box {
  width: 50% !important;
}
/deep/ .tab-component .left-tab-box .left-tab-item .iconfont {
  font-size: 36rpx;
}
.personal-center {
  position: relative;
  height: 100vh;
  width: 100%;
  //   渐变
  // background: linear-gradient(to right top, #ec8fce, #e63f7e, #e645c3);
  background: url("/static/common/weipinhui/userbg.webp");
  background-size: 100% auto; /* 宽度为50%，高度自动调整以保持比例 */
  background-position: bottom left;
  box-sizing: border-box;
  overflow: hidden;
  .top-content {
    position: absolute;
    top: 0;
    left: 0;
    height: 160rpx;
    padding: 0 30rpx;
    width: 100%;
    background: url("/static/common/weipinhui/userbg.webp");
    background-size: cover; /* 确保背景图片覆盖整个元素 */
    background-position: bottom left;
    z-index: 19;
    .image-style {
      margin-top: 80rpx;
      width: 60rpx;
      height: 60rpx;
      display: block;
      border-radius: 50%;
    }
  }
  .right-set-box {
    position: absolute;
    top: 110rpx;
    right: 30rpx;
    z-index: 20;
    transform: translateY(-50%);
    .iconfont {
      font-size: 44rpx;
      font-weight: 300;
      margin: 0 20rpx;
      color: #fff;
    }
  }
  .menu-content {
    // padding-top: 100rpx;
    height: calc(100vh - 100rpx);
    box-sizing: border-box;
    .bottom-box {
      background: #f9f9f9;
      width: 100%;
      border-radius: 30rpx 30rpx 0 0;
      overflow: hidden;
      padding: 10rpx 15rpx;
      box-sizing: border-box;
      .panel-list-item {
        width: 100%;
        column-count: 2;
        column-gap: 20rpx;
        row-gap: 0rpx;

        // 行间距
        box-sizing: border-box;
        .list-item {
          margin-bottom: 20rpx;
        }
      }
    }
  }
}
</style>
